<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .cvs{
      /* width: 400px;
      height:200px; */
      border: solid 2px black;
      background: #ccc;
      font-size: 30px;
    }
  </style>
</head>
<body>
  <canvas class="cvs"> 你的浏览器不支持canvas标签，请下载最新浏览器 </canvas>
</body>
<script>

  const cvs = document.querySelector(".cvs");
  cvs.width = 400;
  cvs.height = 200;

  // 创建画笔
  const ctx = cvs.getContext("2d");
  console.log(ctx);

  // 选择工具，绘制路径
  ctx.moveTo(100, 50);
  ctx.lineTo(200, 50);
  ctx.lineTo(200, 150);

  // 修饰：
  // 设置描边颜色
  ctx.strokeStyle = "red";
  // 设置描边粗细
  // ctx.lineWidth = 10;
  ctx.lineWidth = 2;
  
  // 设置填充颜色
  ctx.fillStyle = "pink";

  // 填充
  // ctx.fill();
  // 描边
  ctx.stroke();


  
</script>
</html>